<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>{$site_name}</title>
    <link rel="stylesheet" href="/static/admin/layui/css/layui.css">
    <script src="/static/admin/jquery/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo show-menu" id="show-menu"><h2>{$site_name}</h2></div>
<!--        <div class="layui-logo"><i class="layui-icon layui-icon-shrink-right"></i></div>-->
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left" lay-filter="header-menu" style="display: none;" id="header_menu">
            {:cache('tree')}
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item"><a href="{:url('/admin/index/index')}">控制台</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
                    {$admin_info['admin_name']}
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">信息设置</a></dd>
                    <dd><a id="update_pwd">修改密码</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="{:url('login/login_out')}">退出</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black" id="left_menu">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree"  lay-filter="left-menu">
                {:cache('tree')}
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 0 5px;" id="content">
            <div class="layui-tab" lay-filter="tabContent"  lay-allowClose="true" id="tabContent">
                <ul class="layui-tab-title">
                    <li class="layui-this">控制台</li>
                    <!--<li>用户基本管理</li>--><!--示例-->
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        这里是控制台首页
                    </div>
                    <!--<div class="layui-tab-item">2</div>--><!--示例-->
                </div>
            </div>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        <div style="text-align: center;">作者：BenTaotao；QQ：1573027560</div>
    </div>
</div>

<script src="/static/admin/layui/layui.js"></script>
<script>
    //JavaScript代码区域
    layui.use(['layer', 'form', 'jquery', 'element'], function(){
        var layer = layui.layer
            , form = layui.form
            , $ = layui.jquery
            , element = layui.element;

        $("#left_menu a").click(function () {
            var tmp = $(this).attr("data-url");
            var tmp_name = $(this).text();
            if (tmp != undefined) {
                addTab(tmp_name, tmp)
            }
        });
        $("#header_menu a").click(function () {
            var tmp = $(this).attr("data-url");
            var tmp_name = $(this).text();
            if (tmp != undefined) {
                addTab(tmp_name, tmp)
            }
        });
        //监听导航点击
        element.on('nav(tabContent)', function (elem) {
            //console.log(elem)
            layer.msg(elem.text());
        });

        /*修改密码*/
        $("#update_pwd").click(function () {
            var $id = "{$admin_info['id']}";
            var index = layer.open({
                title : "修改密码",
                type : 2,
                id:"layer_updatepassword",
                area: ['600px', '600px'],
                content : "{:url('admin/admin_uppass')}?id="+$id,
            });
        });

    });

    // 添加选项卡
    function addTab(name, url) {
        if(layui.jquery(".layui-tab-title li[lay-id='" + name + "']").length > 0) {
            //选项卡已经存在
            layui.element.tabChange('tabContent', name);
        } else {
            //动态控制iframe高度
            var tabheight = layui.jquery(window).height() - 175;
            contentTxt = '<iframe src="' + url + '" scrolling="yes" frameborder="0" width="100%" height="' + (tabheight) + 'PX"></iframe>';
            //新增一个Tab项
            layui.element.tabAdd('tabContent', {
                title: name,
                content: contentTxt,
                id: name
            })
            //切换刷新
            layui.element.tabChange('tabContent', name)
        }
    }

    /*左侧菜单隐藏显示的点击事件*/
    $("#show-menu").on('click', function () {
        let btn = $("#show-menu");
        if (btn.hasClass('show-menu')) {
            btn.removeClass(' show-menu').addClass('hide-menu');
            $("#left_menu").animate({width: 'toggle'});  //toggle如果原来div是隐藏的就会把元素显示，如果原来是显示则隐藏
            $("#header_menu").css({display: 'block'});
            $(".layui-body").animate({left: '0'});
        } else {
            btn.removeClass('hide-menu').addClass('show-menu');
            $("#left_menu").animate({width: 'toggle'});
            $("#header_menu").css({display: 'none'});
            $(".layui-body").animate({left: '200px'});
        }
    })


</script>
</body>
</html>